<template>
  <div>
    <!-- 顶部返回栏 -->
    <bufantop></bufantop>

    <van-tabs v-model="active"  @click="onChanges">
      <van-tab v-for="item in list" :title="item.name" :key="item.id" :name="item.id">
        <div class="info">
          <h3>{{ item.name }}</h3>
          <p>{{ item.front_desc }}</p>
        </div>
        <van-grid :border="false" :column-num="2" class="goodsList">
          <van-grid-item v-for="item in listGoods" :key="item.id">
            <van-image :src="item.list_pic_url" />
            <p class="goodsName">{{item.name}}</p>
            <p class="goodsPrice">¥{{item.retail_price}}</p>
          </van-grid-item>
        </van-grid>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {mapState} from "vuex"
import bufantop from "@/components/bufantop.vue";
import { categoryNav, goodsList } from "@/api/home/categorylist";
export default {
  data() {
    return {
      list: [],
      listGoods: [],
      active:"",
    };
  },
  created() {
    categoryNav({
      id: "1005000",
    }).then((res) => {
      this.list = res.navData;
      console.log(this.list);
    })
    
    this.active=this.id  
    this.onChanges(this.id)
    
  },
  mounted(){
    
  },
  computed:{
      ...mapState(['id'])
  },
  components: {
    bufantop,
  },
  methods: {
    onChanges(name,title){
        goodsList({
        categoryId:name,
      }).then((res) => {
        console.log(res);
        this.listGoods = res.data;
      });
    }
  },
};
</script>

<style lang="scss" scoped>
// 商品列表描述
.info {
  padding: 15px;
  margin: 10px 0 2.5px 0;
  background-color: #fff;
}
.info h3 {
  margin-top: 15px;
  margin-bottom: 9px;
}
.info p {
  margin: 12px 0;
  color: #999;
}

// 商品列表
.goodsList .van-grid-item{
    width: 96%;
}
.goodsList .goodsName{
    padding: 0 10px;
    margin: 7.5px 0 11px;
}
.goodsList .goodsPrice{
    margin: 15px 0;
    color: #b4282d;
    font-size: 15px;
}
</style>